<template>
  <uni-nav-bar title="新增加注机" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">{{TeamInfo.KeyCustom.name}}-{{name}}</view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package drive" v-for="item in PriceList" :key="item.id">
      <view class="space-between">
        <view>价格组</view>
        <view>{{item.price_group_name}}({{item.id}})</view>
      </view>
      <view class="space-between top">
        <view>加注机</view>
        <view>{{item.fill_name}}</view>
      </view>
      <view class="space-between top">
        <view>司机价</view>
        <view>{{item.price}}元/公斤</view>
      </view>
    </view>
  </scroll-view>
  <view class="add" @click="select()">新增加注机</view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { getPriceGroup } from '@/gql/administrator';
  import { showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { information } from '@/stores/administrator';
  const TeamInfo = information();
  /**
   * 大客户列表
   * @property {Array} PriceList 加注机列表 
   * @property {String} priceID 价格组ID
   * @property {Number} pageHeight 页面高度
   * @property {String} name 价格组名称
   */
  const pageHeight = ref();
  const PriceList = ref([])
  const priceID = ref('')
  const name = ref('')
  onLoad((pearm) => {
    priceID.value = pearm.id
    name.value = pearm.name
    uni.getSystemInfo({
      success: function (res) {
        pageHeight.value = res.windowHeight - 180;
      },
    });
    init()
  })
  onShow(() => {
    init()
  })
  function init() {
    if (!priceID.value) {
      return
    }
    showLoading()
    const payload = {
      query: getPriceGroup,
      variables: {
        customers_id: Number(TeamInfo.KeyCustom.id),
        price_group_id: Number(priceID.value)
      },
    };
    toPublish(
      'ql/control/getPriceGroup',
      payload,
      (obj : any) => {
        const { getPriceGroup } = obj.data;
        PriceList.value = getPriceGroup
      }
    );
  }
  function select() {
    navTo('administrator/keyaccount/BindingMachine?id=' + priceID.value + '&name=' + name.value)
  }
</script>

<style scoped lang="less">
  .top {
    margin-top: 15rpx;
  }

  .drive:nth-of-type(1) {
    margin-top: 0px !important;
  }

  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 20rpx auto;
    font-size: 32rpx;
  }
</style>